<template>
    <div :class="{box : true,show : MyList.isshow,notShow : !MyList.isshow}">
        <div class="top" @click="notShow" v-if="MyList.isshow"></div>
        <div class="conter">
            <div class="option">
                <div class="left" @click="onBof">
                    <div :class="'bof boffshi' + myAudio.bofIndex"></div>
                    {{ myAudio.bofIndex == 0 ? '顺序播放' : myAudio.bofIndex == 1 ? '随机播放' : '单曲循环' }}
                    ({{ myAudio.data.length }}首)
                </div>
                <div class="rigth">
                    <!-- <div>
                        <van-icon name="add-o" size="21"/>
                    </div> -->
                    <div @click="DeleteAudioALL">
                        <van-icon name="delete-o" size="21"/>
                    </div>
                </div>
            </div>
            <div class="conter-list">
                <div v-for="(item,index) in myAudio.data" :key="index" :class="{item : true,ave : myAudio.index === index}">
                    <div class="text-name" @click="addAudio(item)">
                        <p>{{item.name}}-{{item.artist}}</p>
                        <div class="timi">{{item.songTimeMinutes}}</div>
                    </div>
                    <van-icon name="cross" class="x" @click="deleteItem(item)"/>
                </div>
            </div>
            <div class="guanbi" @click="notShow">关闭</div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name : 'MyList',
    data() {
        return {
        }
    },
    created(){

    },
    methods : {
        ...mapMutations(['onBof', 'DeleteAudioPlay', 'addAudio', 'DeleteAudioALL']),
        notShow(){
            document.documentElement.style.overflowY = 'auto';//恢复底层的div滚动
            this.MyList.isshow = false;
        },
        deleteItem(item){
            if(this.myAudio.data.length === 1){
                this.notShow()
            }
            this.DeleteAudioPlay(item)
        }
    },
    computed : {
        ...mapState(['myAudio', 'MyDateil', 'MyList'])
    }
}
</script>

<style scoped>
    .box{
        position: fixed;
        bottom: 0;
        height: 100vh;
        z-index: 990;
        transition: height 0.3s;
        color: #222;
    }
    .top{
        height: 30vh;
        width: 100vw;
    }
    .conter{
        position: absolute;
        top: 25vh;
        height: 75vh;
        width: 100vw;
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        background: #fff;
        overflow: hidden;
    }
    .show{
        height: 100vh;
    }
    .notShow{
        height: 0vh;
    }
    .guanbi{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-top: 1px solid #ddd;
        background-color: #fff;
    }



    .option{
        padding: 20px 0 10px 0;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .option .left{
        height: 100%;
        float: left;
        padding-left: 20px;
        font-size: 15px;
    }
    .bof{
        width: 20px;
        float: left;
        margin-right: 2px;
        height: 20px;
    }
    .option .rigth{
        height: 100%;
        float: right;
        padding-right: 10px;
    }
    .option .rigth div{
        float: left;
        margin: 0 20px;
    }

    .conter-list{
        width: 100%;
        height: calc(100% - 100px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px 0;
    }
    .item{
        height: 30px;
        padding: 5px 10px;
        line-height: 30px;
        width: calc(100% - 30px);
    }
    .item .text-name{
        width: calc(100% - 40px);
        float: left;
    }
    .item .text-name>p{
        width: calc(100% - 40px);
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left;
    }
    .item .x{
        text-align: right;
        width: 40px;
    }
    .ave{
        color: var(--songName);
    }
    .timi{
        float: right;
        width: 40px;
        font-size: 8px;
        text-align: center;
    }
</style>